<template>
    <div class="login">
        <div class="login-content">
            <div class="login-content-logn">
                <div class="login-content-logn-container">
                    <div class="logn">
                        <img src="../assets/loginLogo.png" alt="智学无忧">
                    </div>
                    <div class="text">
                        <p>欢迎！</p>
                        <p>智学商城-后台管理系统</p>
                    </div>
                </div>
            </div>
            <!-- 登录框 -->
            <div class="login-content-form">
                <div class="login-content-form-container">
                    <h4>登录</h4>
                    <div class="login-content-form-login">
                        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="0"
                            class="demo-ruleForm">
                            <el-form-item prop="userName">
                                <el-input v-model="ruleForm.username" :prefix-icon="User" autocomplete="off"
                                    placeholder="请输入账号" />
                            </el-form-item>
                            <el-form-item prop="passWord">
                                <el-input v-model="ruleForm.password" :prefix-icon="Lock" type="password" autocomplete="off"
                                    placeholder="请输入密码" />
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="submitForms(ruleFormRef)">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <h6>作者：曹老師</h6>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { get, post } from '../utils/https'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus/lib/components/form/index.js'
import { Lock, User } from '@element-plus/icons-vue'
import cookie from "js-cookie";
import { useUserInfo } from '../stores/admin/index'
import { ElMessage } from 'element-plus/lib/components/index.js';
import { useRouter } from "vue-router"
import { useRoute } from "vue-router"
import { debounce } from "../utils/debounce";
const router = useRouter()
const route = useRoute()
const ruleForm = reactive({
    username: 'admin',
    password: '1234567',
})
const { SETUSER, loginInfo } = useUserInfo()
//表单验证
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid: any) => {
        if (valid) {
            let data = {
                _gp: "admin",
                _mt: "login",
                username:ruleForm.username,
                password: ruleForm.password
            }
            post(data).then((res: any) => {
                console.log(res, '登录');
                let { data: token, errno, errmsg } = res
                // console.log(token, 'token');
                if (200 == errno) {
                    ElMessage.success("登录成功！")
                    // 将token写入到cookie，过期事件为30分钟
                    let now = new Date();
                    now.setTime(now.getTime() + 1000 * 60 * 30)
                    // console.log('cookie过期时间', now)
                    cookie.set("token", token, { expires: now })
                    // cookie.set("adminId", rules.userName)
                    // 登录成功后返回上一次浏览的页面
                    let back = route.query.back
                    // console.log(back,'back12312312');
                    Object.assign(loginInfo, ruleForm)
                    if (back) {
                        router.replace(back)
                        return
                    }
                    router.replace("/index/dashboard")
                } else {
                    ElMessage.error(errmsg)
                }
            }).then((res: any) => {
                let date = {
                    _gp: "admin",
                    _mt: "info",
                }
                post(date).then((res1: any) => {
                    // console.log('res1', res1)
                    let { data, errno, errmsg } = res1
                    if (200 == errno) {
                        console.log(data);
                        SETUSER(data)
                    } else {
                        ElMessage.error(errmsg)
                    }
                })
            })
        } else {
            console.log('请填写账号或密码!')
            return false
        }
    })
}
let submitForms = debounce(submitForm, 800)

</script>


<style lang="less">

.login {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/loginBG.jpg');
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-content {
        width: 900px;
        height: 700px;
        background-color: white;
        display: flex;


        .login-content-logn {
            width: 35%;
            height: 100%;
            background-color: #005DE9;

            .login-content-logn-container {
                margin-top: 200px;
            }

            .text {
                color: white;
                text-align: center;
                line-height: 35px;
            }

            .logn {
                margin: auto;
                background-color: blue;
                text-align: center;
                overflow: hidden;
                width: 110px;
                height: 110px;
                border-radius: 50%;
                box-shadow: 5px -3px 10px 4px rgba(255, 255, 255, 0.5);

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

.login-content-form {
    width: 65%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-content-form-container {
        width: 300px;
        padding: 40px;
        height: 40%;
        text-align: center;
        line-height: 50px;
    }
}

.el-button {
    width: 120px;
    margin: auto;
}
</style>